<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>上传文件</title>
    <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no" />
  </head>
  <style>
    .app {
      font-size: 30px;
      margin-bottom: 50px;
    }
    .btn {
      text-align: center;
      background: #d8d8d8;
      color: #222;
      padding: 20px;
      margin: 50px;
      font-size: 30px;
      border-radius: 4px;
      box-shadow: 4px 2px 10px #999;
    }
    .btn:active {
      opacity: 0.7;
      box-shadow: 4px 2px 10px #555;
    }
  </style>
  <body>
    <div class="app">
      <br /><br />
      <span>上传文件：</span><input type="file" /> <br /><br />
      <span>上传图片：</span><input type="file" accept="image/*" /> <br /><br />
      <span>上传视频：</span><input type="file" accept="video/*" /> <br /><br />
      <br /><br />
    </div>
    <script type="text/javascript">
      /* 监听手机的返回键，如果H5页面要拦截，则返回true；如果不拦截，则返回false */
      function phoneBackButtonListener() {
        console.log('点击了手机的返回键，但是由原生来处理')
        return false
      }
    </script>
  </body>
</html>
